<template>
<div>
      <div>上传附件</div>
       <el-upload
  list-type="picture-card"
  :multiple="true"
  action="''"
  :http-request="upload"
   :file-list="fileList"
  :before-upload="beforeAvatarUpload">
  <i class="el-icon-plus"></i>
 </el-upload>
<el-table :data="table" >
  
             <el-table-column prop="aurl" label="附件图片">
                  <template  slot-scope="scope">

                            <img :src="scope.row.aurl" width="200px" height="200px">

                        </template>
             </el-table-column>
</el-table>
<!-- <div class="demo-image">

       <div class="block"  :key="fit">
    <span class="demonstration">{{ fit }}</span>
    <el-image
      style="width: 200px; height: 200px"
      :src="url"
      :fit="fit"></el-image>
  </div>
</div> -->
<div style="margin-top:25px">
    <el-row >
         <!-- <el-col :span="2" :offset="14">  <el-button size="medium" type="warning" plain @click="upload()">提交</el-button></el-col> -->
  <el-col :span="2" >  <el-button size="medium" type="success" plain @click="goBack()">返回</el-button></el-col>
</el-row>
   
</div>
</div>
 
</template>

<script>

export default ({
  data(){
    return {
   table:[],
 fileList:[],
      //  fileList: [{name: 'food.jpeg', url: 'https://woniuxyoss.oss-cn-chengdu.aliyuncs.com/499c033d-af66-4392-b1e7-9397edb988cc.jpg'}],
    // fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
    // fit:'fill',
     dialogImageUrl: '',
        dialogVisible: false,
    }
  },
  created:function() {
    var bwid = this.$route.query.bwid;
       this.allFile();
     
       
},
   methods:{
  
        goBack() {
        this.$router.push("/home")
        },
      getInfoByBoid() {
          console.log("bwid:"+this.$route.query.bwid)
             this.$axios.post("http://localhost:8082/loan/getInfoByBoid", {
               
                     boid: this.$route.query.bwid,
            }).then(resp=>{
                console.log(resp.data);
                
            });
      },
       handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    //   查看所有文件
    allFile(){
          console.log("abc:"+this.$route.query.bwid)
        this.$axios.post("http://localhost:8082/files/allFile",
        {
            plid:this.$route.query.bwid
        }).then(resp=>{
            console.log(resp.data)
            this.table=resp.data.data;
            if(resp.data.code==500){
                this.$message({
                       type: 'warning',
                        message: '没有附件资料'
                })
            }
        })
    },
    //   上传文件
      upload(fileList){
      //获取文件
    //   let file = document.getElementById("file").files[0];
    let file = fileList.file;
    console.log(fileList)
      console.log(file);
      //将file封装到formdata
      let formData = new FormData();
      formData.append("file",file);
      formData.append("plid",this.$route.query.bwid)
      //上传
      this.$axios.post("http://localhost:8082/files/upload",

      formData,{
         
        headers:{
          'Content-Type':'multipart/form-data'
        }
      }).then(res => {
        console.log(res.data);
          this.allFile();
      })
    
      },
           beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 1;

       
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 1MB!');
        }
        return  isLt2M;
      }
  },
  
})
</script>

<style>

      .el-row {
    margin-bottom: 20px;
  
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
